'use client';

import React, {useMemo} from 'react';
import {motion} from 'framer-motion';
import {FaceSmileIcon} from '@heroicons/react/24/outline';
import {useAppStore} from '@/store';
import {formatCoinChange} from '@/utils';
import Card, {CardHeader, CardTitle, CardContent} from '@/components/ui/Card';

const MoodBoard: React.FC = () => {
    const {activities, settings} = useAppStore();

    // 情绪统计数据
    const moodStats = useMemo(() => {
        const stats = new Map();

        activities.forEach(activity => {
            const moodConfig = settings.moodConfigs.find(m => m.name === activity.mood);
            if (!moodConfig) return;

            if (!stats.has(activity.mood)) {
                stats.set(activity.mood, {
                    name: activity.mood,
                    emoji: moodConfig.emoji,
                    color: moodConfig.color,
                    count: 0,
                    totalCoins: 0,
                    activities: []
                });
            }

            const moodStat = stats.get(activity.mood);
            moodStat.count += 1;
            moodStat.totalCoins += activity.coinChange;
            moodStat.activities.push(activity);
        });

        return Array.from(stats.values()).sort((a, b) => b.count - a.count);
    }, [activities, settings.moodConfigs]);

    const totalActivities = activities.length;

    return (
        <div className="space-y-6">
            <div>
                <h1 className="text-2xl font-bold text-gray-900">情绪看板</h1>
                <p className="text-gray-600 mt-1">查看情绪随时间的分布情况</p>
            </div>

            {/* 情绪统计卡片 */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {moodStats.map((mood, index) => {
                    const percentage = totalActivities > 0 ? (mood.count / totalActivities * 100).toFixed(1) : 0;
                    const coinChange = formatCoinChange(mood.totalCoins);

                    return (
                        <motion.div
                            key={mood.name}
                            initial={{opacity: 0, y: 20}}
                            animate={{opacity: 1, y: 0}}
                            transition={{delay: index * 0.1}}
                        >
                            <Card hover className="relative overflow-hidden">
                                <div
                                    className="absolute inset-0 opacity-5"
                                    style={{backgroundColor: mood.color}}
                                />
                                <CardContent className="p-6 relative">
                                    <div className="flex items-center gap-3 mb-4">
                                        <span className="text-3xl">{mood.emoji}</span>
                                        <div>
                                            <h3 className="font-semibold text-gray-900">{mood.name}</h3>
                                            <p className="text-sm text-gray-600">{percentage}% 占比</p>
                                        </div>
                                    </div>

                                    <div className="space-y-2">
                                        <div className="flex justify-between text-sm">
                                            <span className="text-gray-600">记录次数</span>
                                            <span className="font-medium">{mood.count} 次</span>
                                        </div>
                                        <div className="flex justify-between text-sm">
                                            <span className="text-gray-600">金币影响</span>
                                            <span className={`font-medium ${coinChange.color}`}>
                        {coinChange.sign}{coinChange.text}
                      </span>
                                        </div>
                                    </div>

                                    {/* 进度条 */}
                                    <div className="mt-4 w-full bg-gray-200 rounded-full h-2">
                                        <motion.div
                                            initial={{width: 0}}
                                            animate={{width: `${percentage}%`}}
                                            transition={{duration: 1, delay: index * 0.1}}
                                            className="h-2 rounded-full"
                                            style={{backgroundColor: mood.color}}
                                        />
                                    </div>
                                </CardContent>
                            </Card>
                        </motion.div>
                    );
                })}
            </div>

            {/* 最近情绪趋势 */}
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <FaceSmileIcon className="w-5 h-5"/>
                        最近情绪记录
                    </CardTitle>
                </CardHeader>
                <CardContent>
                    {activities.length > 0 ? (
                        <div className="space-y-3">
                            {activities.slice(0, 10).map((activity) => {
                                const moodConfig = settings.moodConfigs.find(m => m.name === activity.mood);
                                const coinChange = formatCoinChange(activity.coinChange);

                                return (
                                    <motion.div
                                        key={activity.id}
                                        initial={{opacity: 0, x: -20}}
                                        animate={{opacity: 1, x: 0}}
                                        className="flex items-center gap-4 p-3 bg-gray-50 rounded-lg"
                                    >
                                        <span className="text-2xl">{moodConfig?.emoji}</span>
                                        <div className="flex-1">
                                            <h4 className="font-medium text-gray-900">{activity.title}</h4>
                                            <p className="text-sm text-gray-600 mt-1 line-clamp-1">{activity.content}</p>
                                        </div>
                                        <div className="text-right">
                                            <div className="text-sm text-gray-500">
                                                {new Date(activity.timestamp).toLocaleDateString()}
                                            </div>
                                            <div className={`text-sm font-medium ${coinChange.color}`}>
                                                {coinChange.sign}{coinChange.text}
                                            </div>
                                        </div>
                                    </motion.div>
                                );
                            })}
                        </div>
                    ) : (
                        <div className="text-center py-8 text-gray-500">
                            <FaceSmileIcon className="w-12 h-12 mx-auto mb-4 text-gray-300"/>
                            <p>还没有情绪记录</p>
                        </div>
                    )}
                </CardContent>
            </Card>
        </div>
    );
};

export default MoodBoard;